<script setup lang="ts">
import { getCurrentInstance, reactive, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { useViewScroll } from "@/hooks/scroll";
import { useSwipe } from "@/hooks/swipe";
import { create_order_api } from "@/package/mall/api/guide_vip";
import { guide_vip_order_mini_pay_api } from "@/package/mall/api/guider_home";
import { user_info_api } from "@/api/guider_home";
import { requestPayment } from "@/utils/payment";
import { AppData } from "@/utils/app";
import { Toast } from "@/utils/toast";

import PrivilegeItem from "./components/privilege-item.vue";

onLoad(() => {
  const eventChannel = (
    getCurrentInstance()?.proxy as any
  ).getOpenerEventChannel() as UniApp.EventChannel;
  eventChannel.once("ev-privilege-data", (resp) => {
    console.log("ev-privilege-data", resp);

    swipeData.index = resp.privilegeIndex;
    swipeData.current = resp.privilegeIndex;
    privilegeList.value = resp.privilegeList;

    const product = resp.productData;
    productData.id = product.id;
    productData.price = product.price;
    productData.name = product.name;
  });
});

const privilegeList = ref<any[]>([]);

const productData = reactive({ id: "", price: "", name: "" });

const buyClick = () => {
  Toast.showLoading();
  create_order_api({ product_id: productData.id })
    .then((resp) => {
      return guide_vip_order_mini_pay_api({ order_id: resp.order_id }).then(
        (resp) => {
          Toast.hideLoading();
          requestPayment(resp, () => {
            Toast.show("支付成功");
            // 刷新 vip 状态
            user_info_api().then((resp) => {
              const userData = AppData.userData;
              userData.is_vip_member = resp.is_vip_member;
              AppData.userData = userData;
            });
          });
        }
      );
    })
    .catch(() => Toast.hideLoading());
};

const { scrollIndex, scrollToIndex } = useViewScroll();
const { swipeData, swipeChange } = useSwipe((index) => {
  scrollToIndex(index);
});
</script>

<template>
  <scroll-view
    class="privilege-tab"
    :scroll-into-view="`tab-${scrollIndex}`"
    scroll-x
    enhanced
    :show-scrollbar="false"
  >
    <view class="privilege-tab-space"></view>
    <view
      class="privilege-tab-item"
      v-for="(i, d) of privilegeList"
      :key="i.id"
      @click="swipeData.current = d"
    >
      <image
        class="privilege-tab-img"
        :src="swipeData.index === d ? i.select_icon : i.icon"
      />
      <view class="privilege-tab-name">{{ i.name }}</view>
    </view>
  </scroll-view>

  <swiper
    class="privilege-swipe"
    :current="swipeData.current"
    circular
    previous-margin="80rpx"
    next-margin="80rpx"
    @change="swipeChange"
  >
    <swiper-item v-for="(i, d) of privilegeList" :key="i.id">
      <view
        class="privilege-swipe-item"
        :style="{
          transform: swipeData.index === d ? '' : 'scale(0.8644)',
          opacity: swipeData.index === d ? '' : 0.6,
        }"
      >
        <PrivilegeItem :info="i" />
      </view>
    </swiper-item>
  </swiper>

  <view class="privilege-btn" @click="buyClick">
    <image class="privilege-btn-img" src="@/package/mall/static/vip-btn.png" />
    <view class="privilege-btn-text">
      ￥{{ productData.price
      }}<text class="privilege-btn-text2">购买{{ productData.name }}</text>
    </view>
  </view>
</template>

<style lang="scss">
.privilege-tab {
  width: 100%;
  height: 224rpx;
  white-space: nowrap;
  background-color: #ffffff;

  .privilege-tab-space,
  .privilege-tab-item {
    display: inline-block;
    vertical-align: top;
  }

  .privilege-tab-space {
    width: 20rpx;
  }

  .privilege-tab-item {
    width: 156rpx;
    padding-top: 20rpx;
  }

  .privilege-tab-img {
    display: block;
    width: 108rpx;
    height: 108rpx;
    margin: 0 auto;
  }

  .privilege-tab-name {
    padding: 0 10rpx;
    font-size: 20rpx;
    color: #333333;
    line-height: 28rpx;
    text-align: center;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}

.privilege-swipe {
  height: 820rpx;

  .privilege-swipe-item {
    height: 100%;
    transition: all 0.3s ease-out;
  }
}

.privilege-btn {
  position: fixed;
  left: 50rpx;
  bottom: env(safe-area-inset-bottom);
  width: 650rpx;
  height: 88rpx;
  margin-bottom: 16rpx;

  .privilege-btn-img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .privilege-btn-text {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 40rpx;
    color: #ffffff;
    line-height: 56rpx;
    white-space: nowrap;
    font-weight: bold;
    transform: translate(-50%, -50%);
  }

  .privilege-btn-text2 {
    margin-left: 20rpx;
    font-size: 32rpx;
    line-height: 46rpx;
  }
}
</style>